3.스네이크 게임

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 스네이크 게임을 만들어줘. 외부 라이브러리 없이 순수 코드로만 구현해줘. 게임 이름은 "바이브 스네이크"로 해줘.

1. 프로그램 개요
다크 테마 기반의 네온 느낌 스네이크 게임이야. 캔버스(Canvas)를 사용해서 뱀과 먹이를 그리고, 뱀이 먹이를 먹으면 길어지면서 점수가 올라가는 전통적인 스네이크 게임 구조야. 단일 HTML 파일 하나에 CSS와 JavaScript를 전부 포함해서 만들어줘. 구글 폰트 "Jua"를 사용해줘. 한국어 UI로 만들어줘.

2. 기능
난이도 시스템

난이도는 4단계로 나눠줘: 초급(easy), 중급(medium), 고급(hard), 지옥(extreme). 각 난이도마다 그리드 크기, 속도, 벽 충돌 여부, 장애물 유무, 레벨업에 필요한 먹이 수가 달라져.

초급: 그리드 20x20, 속도 150ms, 벽 통과 가능, 장애물 없음, 레벨업에 먹이 5개 필요
중급: 그리드 20x20, 속도 110ms, 벽 통과 가능, 장애물 없음, 레벨업에 먹이 7개 필요
고급: 그리드 25x25, 속도 85ms, 벽 충돌 사망, 장애물 있음(6개), 레벨업에 먹이 10개 필요
지옥: 그리드 30x30, 속도 65ms, 벽 충돌 사망, 장애물 있음(12개), 레벨업에 먹이 12개 필요
난이도 버튼을 누르면 게임이 리셋되면서 해당 난이도로 설정돼.

뱀 조작

키보드 방향키(↑↓←→) 또는 WASD로 조작할 수 있게 해줘. 현재 진행 방향의 반대 방향으로는 입력이 무시되게 해줘. 모바일에서는 십자 방향 패드(D-Pad)를 화면에 표시해줘. 캔버스 위에서 터치 스와이프로도 방향 전환이 되게 해줘. D-Pad는 터치 디바이스(hover: none, pointer: coarse)에서만 보이게 해줘.

먹이 시스템

일반 먹이는 빨간색 원형으로, 맥박처럼 살짝 크기가 커졌다 작아졌다 하는 애니메이션을 넣어줘. 하이라이트 점도 찍어서 입체감을 줘.

특수 먹이는 3종류야. 다이아몬드(마름모) 모양으로 그려줘:

골든(golden): 노란색, 8초간 점수 2배, 아이콘 ✨
스피드(speed): 파란색, 5초간 이동속도 40% 가속, 아이콘 ⚡
실드(shield): 민트색, 10초간 충돌 1회 방어, 아이콘 🛡
특수 먹이는 일반 먹이를 먹은 후 5~13초 사이 랜덤 시간에 나타나고, 7초 뒤에 자동으로 사라져. 사라지기 2초 전부터는 깜빡이게 해줘.

콤보 시스템

3초 이내에 연속으로 먹이를 먹으면 콤보가 쌓여. 콤보 배수는 최대 5배까지 적용돼. 콤보가 활성화되면 캔버스 오른쪽 상단에 "Nx COMBO" 텍스트를 노란색으로 표시해줘. 3초간 먹이를 못 먹으면 콤보가 리셋돼.

점수 시스템

일반 먹이는 기본 10점 × 콤보 배수, 골든은 50점 × 콤보 배수, 스피드는 20점 × 콤보 배수, 실드는 15점 × 콤보 배수. 골든 타임 중에는 모든 점수가 추가로 2배가 돼. 레벨업 시 레벨 × 25점 보너스를 줘.

레벨 시스템

먹이를 난이도별 필요 개수만큼 먹으면 레벨업이 돼. 레벨업하면 이동 속도가 8ms씩 빨라져 (최소 40ms까지). 고급/지옥 난이도에서는 레벨이 짝수가 될 때마다 장애물이 2개씩 추가돼. 레벨 진행도를 프로그레스 바로 보여줘.

장애물

보라색 사각형으로, 안에 X자 무늬를 넣어줘. 뱀 시작 위치 주변 3칸 이내에는 생성되지 않게 해줘. 장애물에 부딪히면 게임 오버야 (실드가 있으면 실드가 소모되고 살아남아).

벽 통과 토글

게임 중에도 벽 통과 ON/OFF를 토글할 수 있는 버튼을 넣어줘. ON이면 벽을 뚫고 반대편으로 나와. OFF면 벽에 부딪히면 게임 오버야 (실드가 있으면 방어하고 방향이 반전돼).

일시정지

스페이스바, ESC, 또는 일시정지 버튼으로 토글 가능하게 해줘. 일시정지 시 캔버스 위에 반투명 블러 오버레이를 띄우고 "일시정지" 메시지와 "계속하기" 버튼을 보여줘. D-Pad 가운데 버튼도 일시정지 기능으로 만들어줘.

격자 표시

격자선 ON/OFF를 토글할 수 있는 버튼을 넣어줘. 격자선은 아주 연한 흰색(투명도 3%)으로 그려줘. 키보드 G키로도 토글 가능하게 해줘.

게임 오버

뱀이 자기 몸, 벽(벽 통과 OFF일 때), 장애물에 부딪히면 게임 오버야. 게임 오버 시 뱀 머리 위치에 빨간 파티클을 20개 터뜨려줘. 0.5초 뒤에 모달 팝업을 띄워서 난이도, 점수, 뱀 길이, 소요 시간, 레벨, 먹은 먹이 수를 보여줘. 보드를 가득 채우면 "완벽 클리어"로 처리하고 컨페티 효과를 터뜨려줘.

최고 기록

난이도별로 최고 점수를 localStorage에 저장해줘. 화면 하단에 접을 수 있는(details/summary) 최고 기록 섹션을 넣어줘. 각 난이도별로 점수, 뱀 길이, 레벨, 날짜를 카드 형태로 보여줘. 새 기록 달성 시 토스트 알림을 띄워줘.

단축키

방향키/WASD로 이동, Space로 일시정지, R로 새 게임, G로 격자 토글. 이 안내를 화면 하단에 표시해줘. 터치 디바이스에서는 숨겨줘.

토스트 알림

화면 상단 중앙에 토스트 메시지를 띄워줘. success(민트 테두리), error(빨간 테두리), info(파란 테두리) 3가지 타입이 있어. 나타날 때 위에서 슬라이드되고, 2.5초 후에 페이드아웃 되면서 사라지게 해줘. 3초 뒤에 DOM에서 제거해줘.

3.디자인
전체 테마

완전한 다크 테마로 만들어줘. 배경은 거의 검정(#0a0a0a), 표면 색상은 #141414, #1e1e1e, #2a2a2a 단계로 구분해줘. 메인 강조색은 민트/시안 계열(#00d4aa)이야. 에러/위험 색상은 코럴 핑크(#ff4466)를 써줘. 전체적으로 네온 발광 느낌을 주되 은은하게 해줘. CSS 변수(:root)로 색상을 관리해줘.

배경 파티클

화면 배경에 작은 민트색 원형 파티클들이 아래에서 위로 천천히 떠오르는 애니메이션을 넣어줘. 15개 정도 만들고, 크기 1~4px, 애니메이션 10~25초, 투명도 0.3 정도로 은은하게 해줘. fixed 포지션에 pointer-events: none으로 해줘.

헤더

게임 타이틀 "🐍 바이브 스네이크"를 흰색에서 민트색으로 그라데이션 텍스트로 만들어줘. 아래에 "Vibe Coding Snake Game" 서브타이틀을 회색으로 넣어줘.

캔버스

캔버스를 민트색 3px 테두리와 둥근 모서리(10px)로 감싸줘. 네온 발광 box-shadow를 넣어줘. 캔버스 크기는 화면 너비(최대 500px)와 화면 높이 45%를 기준으로 셀 크기를 계산해서 정해줘. 최소 셀 크기는 12px.

뱀 그리기

머리는 민트색 방사형 그라디언트로, 약간 둥근 사각형으로 그려줘. 네온 발광 효과(shadowBlur)를 넣어줘. 이동 방향에 따라 눈 위치가 바뀌게 해줘. 눈은 흰 원 안에 검은 동공 구조야. 몸통은 머리에서 꼬리로 갈수록 점점 어두워지게 해줘. 골든 타임에는 몸통이 노란색 계열로 바뀌어. 실드가 활성화되면 머리가 더 밝은 민트색으로 바뀌어. 각 세그먼트는 살짝 패딩을 줘서 분리감을 만들어줘.

오버레이

게임 시작 전, 일시정지, 게임 오버 시 캔버스 위에 반투명 검정(65%) + backdrop-filter blur 오버레이를 띄워줘. 가운데에 제목, 설명, 버튼을 배치해줘. 시작/계속 버튼은 민트 그라데이션 배경의 둥근 알약 모양이야.

모달

게임 오버 시 화면 전체를 어둡게 하고 가운데에 모달을 띄워줘. 스케일 애니메이션으로 나타나게 해줘. 안에 통계를 key-value 형태로 줄마다 표시하고, 하단에 "새 게임 시작" 버튼을 넣어줘.

하단 액션 버튼

일시정지, 벽 통과, 격자, 새 게임 4개 버튼을 가로로 균등 배치(grid 4열)해줘. 각 버튼 안에 이모지 아이콘과 텍스트를 세로로 배치해줘. 활성 상태일 때 민트색 테두리와 배경, 새 게임 버튼은 hover 시 빨간색 계열로 해줘.

반응형

clamp()로 폰트 크기를 반응형으로 조절해줘. 400px 이하, 375px 이하, 가로 모드(max-height 500px)에서 각각 여백과 폰트를 줄여줘. 가로 모드에서는 서브타이틀과 D-Pad를 숨겨줘. max-width는 520px로 제한해줘.

4.기술
구조

단일 HTML 파일. head에 style 태그, body 끝에 script 태그. 외부 의존성은 Google Fonts(Jua)만 사용해줘.

캔버스 렌더링

HTML5 Canvas 2D Context를 사용해줘. 매 프레임마다 전체를 지우고 다시 그리는 방식이야. 격자 → 장애물 → 먹이 → 특수 먹이 → 뱀 → 파티클 → 콤보 텍스트 순서로 그려줘. roundRect 유틸 함수를 만들어서 둥근 사각형을 그려줘(quadraticCurveTo 사용).

게임 루프

setInterval로 게임 루프를 돌려줘. 속도가 바뀔 때마다 clearInterval 후 새 interval을 설정해줘. 타이머도 별도 setInterval(1초 간격)로 관리해줘.

파티클 시스템

먹이를 먹거나 특정 이벤트 시 해당 위치에서 작은 원형 파티클들이 터져나가는 효과를 만들어줘. 파티클마다 위치, 속도(vx/vy), 수명(life), 감소율(decay), 크기, 색상을 가져. 매 프레임 업데이트하고 수명이 0 이하면 제거해줘.

충돌 감지

그리드 좌표 기반으로 뱀 머리와 벽/자기 몸/장애물/먹이의 좌표를 비교하는 방식이야.

먹이 생성

뱀, 장애물, 특수 먹이가 차지하지 않은 빈 칸 목록을 만든 후 랜덤 선택하는 방식이야.

데이터 저장

localStorage에 'snake_records' 키로 난이도별 최고 기록을 JSON으로 저장해줘.

5. 추가 조건
모든 텍스트는 한국어로 해줘.
컨페티 효과는 div 요소를 80개 생성해서 CSS 애니메이션으로 위에서 아래로 떨어지게 해줘. 7가지 색상을 랜덤으로 섞어줘.
게임이 시작되지 않은 상태에서도 캔버스에 배경과 격자가 그려져 있게 해줘.
윈도우 리사이즈 시 게임이 실행 중이 아니면 캔버스를 재설정하고 다시 그려줘.
touch-action: manipulation과 -webkit-tap-highlight-color: transparent를 적용해서 모바일에서 더블탭 줌이나 탭 하이라이트가 안 생기게 해줘.
user-scalable=no를 viewport 메타에 넣어줘.
image-rendering: pixelated를 캔버스에 적용해줘.
모든 이모지 아이콘은 텍스트 이모지를 그대로 사용해줘 (이미지 파일 없음).
모든 것을 하나의 HTML 파일 안에 넣어줘. 파일을 분리하지 마.